
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>映射管理</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="stylesheet" href="./assets/layui/css/layui.css">
    <link rel="stylesheet" href="./assets/admin/css/style.css">
    <script src="./assets/layui/layui.js"></script>
    <script src="./assets/js/jquery-3.3.1.min.js"></script>
    <script src="./assets/js/vue.min.js"></script>
    <script src="./assets/admin/js/common.js"></script>
    <script src="./assets/js/vue-layui-switch.js"></script>
    <script src="./assets/admin/js/config.js"></script>
</head>
<body>

<div id="app">

    <!--顶栏-->
    <#include "inc/header.ftl">

    <div class="main">
        <!--左栏-->
        <#include "inc/left-menu.ftl">
        <!--右侧-->
        <div class="right p20">

<div></div>
<div class="layui-row">
    <div class="layui-col-lg8">
        <button class="layui-btn" @click="createTunnel">添加新的映射</button>
    </div>

    <div class="layui-col-lg4" style="text-align: right">

    </div>
</div>


<table class="layui-table layui-form">

    <thead>
    <tr>
        <th class="col-1">映射名称</th>
        <th class="col-1">外网端口</th>
        <th class="col-2">内网地址</th>
        <th class="col-3">是否启用</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>

    <tr v-if="tunnels.length==0"><td colspan="5" align="center">暂无映射</td></tr>

    <tr v-for="t,i in tunnels">
        <td class="col-1">{{t.name}}</td>
        <td class="col-1">{{t.wanPort}}</td>
        <td class="col-2">{{t.lanHost}}:{{t.lanPort}}</td>
        <td class="col-3">
            <vue-switch text="关闭|启用" v-model="t.state" @toggle="switchToggle(t)"></vue-switch>
        </td>
        <td>
            <button class="nt-btn layui-btn layui-btn-sm" @click="modifyTunnel(t)">修改</button>
            <button class="nt-btn layui-btn layui-btn-sm layui-btn-danger" @click="delTunnel(t)">删除</button>
        </td>
    </tr>

    </tbody>
</table>


            <div id="box1" class="hidden">
                <form action="" class="layui-form" style="padding: 20px" lay-filter="from">
                    <div class="layui-form-item"><label class="layui-form-label">映射名称</label>
                        <div class="layui-input-block">
                            <input v-model="formModel.name" type="text" name="name" placeholder="请输入名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item"><label class="layui-form-label">外网端口</label>
                        <div class="layui-input-block">
                            {{( edit=(act=='modify') )?'':''}}
                            <input v-model="formModel.wanPort" type="text" placeholder="10000-60000" class="layui-input" :readonly="edit" :style="{'background':edit?'#c2c2c2':''}">
                        </div>
                    </div>
                    <div class="layui-form-item"><label class="layui-form-label">内网地址</label>
                        <div class="layui-input-block">
                            <input v-model="formModel.lanHost" type="text" name="file" required="required" lay-verify="required" placeholder="127.0.0.1" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item"><label class="layui-form-label">内网端口</label>
                        <div class="layui-input-inline">
                            <input v-model="formModel.lanPort" type="text" name="sort" placeholder="1-65535" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                </form>
            </div>


        </div>
    </div>
</div>


<script>

    var model = {name:'新的映射',wanPort:'',lanHost:'127.0.0.1',lanPort:'',remark:''};

    layui.use('form', function () {
        var form = layui.form,
            layer = layui.layer;
    });

    var vue = new Vue({
        el:'#app',
        data:{
            clients:[],
            tunnels:[],
            clientKey:getQueryVariable('clientKey'),
            formModel:model,
            act:'', //操作标记，create,modify
        },
        created:function(){
            var that = this;
            this.loadClients();
            this.loadTunnels();
        },
        methods:{
            loadClients() {
                var that = this;
                $.post('/api/client/list',{},function (ret){
                    that.clients = ret.clients;
                    localStorage.setItem('clients',JSON.stringify(that.clients));
                })
            },
            loadTunnels() {
                var that = this;
                $.post('/api/tunnel/list',{clientKey:that.clientKey},function (ret){
                    that.tunnels = ret.data;
                    //localStorage.setItem('clients', JSON.stringify(that.clients));
                })
            },
            switchToggle(tunnel){
                var that = this;
                console.log(tunnel)

                $.ajax({
                    url:'/api/tunnel/turn',
                    type:'post',
                    data:{id:tunnel.id,state:tunnel.state},
                    success(ret) {
                        if (ret.code == 200) {
                            tunnel.state=ret.state;
                            layer.msg('修改成功');
                        }
                    },
                    error() {
                        tunnel.state=tunnel.state?0:1;
                        layer.msg('修改失败');
                    }
                })
            },
            delTunnel(tunnel) {
                var that = this;
                console.log(tunnel)
                layer.confirm('确定删除吗?['+tunnel.name+']', {icon: 3, title:'提示'}, function(index){
                    layer.close(index);
                    $.post('/api/tunnel/delete',{id:tunnel.id},function (ret) {
                        console.log(ret)
                        if (ret.code == 200) {
                            that.loadTunnels();
                            layer.alert('删除成功');
                        }
                    })
                });
            },
            createTunnel() {
                var that = this;
                that.formModel=model;
                that.act = 'create'; //创建模式
                layer.open({
                    type: 1,
                    title:'添加映射配置',
                    area: ['600px', '360px'],
                    btn: ['确认提交', '取消'],
                    shadeClose: true, //点击遮罩关闭
                    content:$('#box1'),
                    yes(index, layero){
                        console.log(that.formModel);
                        that.formModel.clientKey=that.clientKey;
                        if (that.formModel.name.length==0) {
                            layer.alert('名称不能为空');
                            return;
                        }
                        var port = Number(that.formModel.wanPort);
                        if (isNaN(port)||port<10000||port>60000) {
                            layer.alert('外网端口不合法');
                            return;
                        }
                        if (!check_ip(that.formModel.lanHost)) {
                            layer.alert('IP地址不合法');
                            return;
                        }
                        var port = Number(that.formModel.lanPort);
                        if (isNaN(port)||port<1||port>65535) {
                            layer.alert('内网端口不合法');
                            return;
                        }
                        $.post('/api/tunnel/create',that.formModel,function (ret) {
                            console.log(ret)
                            layer.msg(ret.msg);
                            if (ret.code == 200) {
                                that.loadTunnels();
                                layer.close(index);
                                layer.msg('创建成功');
                            }
                        });
                    }
                });

            },
            modifyTunnel(tunnel) {
                var that = this;
                that.formModel=tunnel;
                that.act = 'modify'; //创建模式
                layer.open({
                    type: 1,
                    title:'修改映射配置',
                    area: ['600px', '360px'],
                    btn: ['确认提交', '取消'],
                    shadeClose: true, //点击遮罩关闭
                    content:$('#box1'),
                    yes(index, layero){
                        console.log(that.formModel);
                        //that.formModel.clientKey=that.clientKey;
                        if (that.formModel.name.length==0) {
                            layer.alert('名称不能为空');
                            return;
                        }
                        var port = Number(that.formModel.wanPort);
                        if (isNaN(port)||port<10000||port>60000) {
                            layer.alert('外网端口不合法');
                            return;
                        }
                        if (!check_ip(that.formModel.lanHost)) {
                            layer.alert('IP地址不合法');
                            return;
                        }
                        var port = Number(that.formModel.lanPort);
                        if (isNaN(port)||port<1||port>65535) {
                            layer.alert('内网端口不合法');
                            return;
                        }
                        $.post('/api/tunnel/update',that.formModel,function (ret) {
                            console.log(ret)
                            layer.msg(ret.msg);
                            if (ret.code == 200) {
                                that.loadTunnels();
                                layer.msg('修改成功');
                            }
                        });
                    }
                });
            },


        }
    })

</script>
</body>
</html>
<#--
<style>
    .col-1{
        width: 100px;
    }
    .col-2{
        width: 200px;
    }
    .col-3{
        width: 100px;
    }
</style>-->
<style>
    .nt-btn {
        height: 24px;
        line-height: 24px;
    }
</style>